<template>
    <div id="email">
        <header div class="head">        
            <div class="back" @click="$router.go(-1)">            
                <mu-icon value="chevron_left" />
            </div>
            <div class="head_text" @click="" >
                {{ msg }}           
            </div>
            <div class="flex1"></div>
        </header>
        
        <div class="mail">
            <ul>
                <!-- <router-link :to="{path:'/msglist',query:{stewardId:5,name:'赵倩'}}">
                    <li>
                        <img class="left" src="../../assets/images/pic01.png">
                        <div class="list-mail left">
                            <span class="font16">水萝卜</span>
                            <span class="mail-info">你好</span>
                            <span class="mail-address">青花瓷陕西南路186弄18号102</span>
                        </div>
                    </li>
                </router-link> -->
                
                <li v-for="(item,index) in Sessions">
                    <router-link :to="{path:'/msglist',query:{stewardId:item.receiverId,name:item.receiverName}}">
                        <!-- <img class="left" :src="item.receiverIcon"> -->
                        <img class="left" src="../../assets/images/pic01.png">
                        <div class="list-mail left">
                            <span class="font16">{{item.receiverName}}</span>
                            <!-- <span class="mail-info">你好</span>
                            <span class="mail-address">青花瓷陕西南路186弄18号102</span> -->
                        </div>
                    </router-link>
                </li>
            </ul>
            <!-- {{ Sessions }} -->
        </div>
    </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'email', //组件的名字
        data() {
            return { //数据
                msg: '信箱'
            }
        },
        methods: { //方法
            ...mapActions(['getSession']),
            setSession(){
                let vm = this
                let wx = JSON.stringify({openId:$.local_Storage.getItem('wxopenid')})
                $.hsf.ajaxPost('user/searchUserByOpenId',wx,'',function(result){
                    if(result.code == '200'){
                        console.log(result)
                        if(result.data != null){
                            let obj = {
                                senderId : result.data.id,
                                //senderId : 18,//发送者ID从本地存储获取
                                /*receiverId:5,
                                rows:'100',
                                page:'1',
                                startRowNum:'',*/
                            }
                            let objs = JSON.stringify(obj)
                            vm.getSession(objs) 
                        }
                    }
                }) 
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['Sessions'])
        },
        mounted: function() { //组件加载完成
            this.setSession()
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        },
        components: {

        }
    }
</script>
<style scoped lang="scss">
    .mail{
        background-color: #eee;
        li{
            border-bottom: solid 1px #fff;
            padding: 10px 10px 7px 0;
            margin-left: 60px;
            line-height: 24px;
            img{
                width: 45px;
                height: 45px;
                -webkit-border-radius:23px;
                border-radius:23px;
                margin-left:-50px;
            }
            .list-mail{
                span{
                    display: block;
                    margin:10px 0 0 10px;
                    color:#666666;
                }
                /* .mail-info{
                    margin:5px 0;
                }
                .mail-address{
                    color:#aaa;
                } */
            }
        }
        ::after{
            content: ".";
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->